<template>
  <div class="outer-box">
    <div class="container">
      <div class="downloadC-title my_text_center">
        <p>专注彩票&nbsp;&nbsp;服务彩民</p>
      </div>
      <div class="downloadC-clickbtn">
        <div class="clickbtn-ios" @click="clickIOS()">
          <img class="clickbtn-icon" src="../assets/imgs/download-ios-icon.png" alt="">
          <span class="clickbtn-text">iPhone下载</span>
        </div>
        <div class="clickbtn-android" @click="clickAndroid()">
          <img class="clickbtn-icon" src="../assets/imgs/download-android-icon.png" alt="">
          <span class="clickbtn-text">Android下载</span>
        </div>
        <div class="clickbtn-pc" @click="clickPC32()">
          <img class="clickbtn-icon" src="../assets/imgs/download-pc-icon.png" alt="">
          <span class="clickbtn-text">客户端下载</span>
        </div>
        <!-- <div class="clickbtn-pc-64" @click="clickPC64()">
          <img class="clickbtn-icon" src="../assets/imgs/download-pc-icon.png" alt="">
          <span class="clickbtn-text">客户端下载(64位)</span>
        </div> -->
      </div>
      <div class="downloadC-erweima">
        <div class="erweima-bg my_text_center">
          <!-- <div class="erweima" id="qrcodeNode"></div>] -->
          <div class="erweima" id="qrcodeNode"></div>
          <span v-show="andriodshow">Android下载</span>
          <span v-show="iphoneshow">Iphone下载</span>
        </div>
      </div>
    </div>
    <div class="info-box">
         <h1 v-show="andriodshow">安卓APP彩票工具箱</h1>
         <h1 v-show="iphoneshow">IOS APP彩票工具箱</h1>
         <p>1.彩票工具箱</p>
         <p>2.做号，大底，交集，倍投计算器</p>
         <p>3.扫码下载安装</p>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
      erweimaArr: [],
      iphoneshow:true,
      andriodshow:false
    };
  },
  mounted() {
    this.axios
      .get("Download/index")
      .then(res => {
        if (res.data.status) {
          this.erweimaArr = res.data.data;
          if(this.$route.query.type == 20){
            this.qrcodeFn(this.erweimaArr.android.url); 
            this.iphoneshow = false,
            this.andriodshow = true
          }else{
            this.qrcodeFn(this.erweimaArr.ios.url);
            this.iphoneshow = true,
            this.andriodshow = false
          }
        }else{
          this.log(res.data.message);
        }
      })
      .catch(err => {
        this.log(err);
      });
  },
  watch:{
    routerType(){
      if(this.$route.query.type == 20){
        document.getElementById('qrcodeNode').innerHTML = '';
        this.qrcodeFn(this.erweimaArr.android.url); 
        this.iphoneshow = false,
        this.andriodshow = true
      }else{
        document.getElementById('qrcodeNode').innerHTML = '';
        this.qrcodeFn(this.erweimaArr.ios.url);
        this.iphoneshow = true,
        this.andriodshow = false
      }
    }
  },
  computed:{
    routerType(){
      return this.$route.query.type;
    }
  },
  methods: {
  getCPU()
    {
    var agent=navigator.userAgent.toLowerCase();
     if(agent.indexOf("win64")>=0||agent.indexOf("wow64")>=0) return "x64";
     return navigator.cpuClass;
  },
    qrcodeFn (text) {
      var qrcode = new QRCode('qrcodeNode', {
        width: 136,
        height: 136,
        colorDark : '#000000',
        colorLight : '#ffffff',
        correctLevel : QRCode.CorrectLevel.H 
      });
      qrcode.makeCode(text)
    },
    clickIOS() {
        document.getElementById('qrcodeNode').innerHTML = '';
        this.qrcodeFn(this.erweimaArr.ios.url);
        this.iphoneshow = true,
        this.andriodshow = false 
    },
    clickAndroid() {
      document.getElementById('qrcodeNode').innerHTML = '';
      this.qrcodeFn(this.erweimaArr.android.url);
      this.iphoneshow = false,
      this.andriodshow = true
    },
    clickPC32() {
      if(this.erweimaArr.pc32 == ''){
        this.warnToastFn()
      }else{
        if(this.getCPU()=='x64'){
          location.href = this.erweimaArr.pc64.url;
        }else{
          location.href = this.erweimaArr.pc32.url;
        }
        // location.href = this.erweimaArr.pc32.url;
      }
    },
    // clickPC64() {
    //   if(this.erweimaArr.pc64 == ''){
    //     this.warnToastFn()
    //   }else{
    //   location.href = this.erweimaArr.pc64.url;
    //   }
    // },
    warnToastFn() {
      this.$toast({
        message: "即将上线，敬请期待",
        time: 3000
      });
    },
  }
};
</script>
<style lang="less" scoped>
@import url(../assets/css/downloadcenter.less);
.info-box{
  height: 256px;
  width: 495px;
  margin: 0 auto;
  margin-top: 60px;
  padding-top: 20px
}
.info-box h1{
  margin-bottom: 10px;
}
.info-box p{
  line-height: 30px;
  margin-left: 10px;
}
</style>


